<template>
    <div v-if="update" class="pages_box">
        <span class="pages_item cur" @click="goFir">首页</span>
        <span class="pages_item" @click="goPrev">上一页</span>
        <span v-for="(item,index) in initArray" @click="goPage(item)" :key="index" class="pages_item" :class="item==current?'current_page':''">{{item}}</span>
        <span class="pages_item" @click="goNext">下一页</span>
        <span class="pages_item" @click="goLast">尾页</span>
        <input v-model="current" class="pages_input" type="text">
        <span class="pages_item" @click="goPage(current)">前往</span>

        
    </div>
</template>
<script>
//展示首页，上一页，当前页，下一页，尾页  search
export default {
  data: function() {
    return {
      update: true,
      total: 5,
      current: 1
    };
  },
  computed: {
    go: {
      // getter
      get: function() {
        console.log("通过计算computed的Getter设置go的值");
        return 3;
      },
     
    },
    initArray: function() {
      let array = [];
      if (this.total <= 10) {
        return this.total;
      } else if (this.total > 10 && this.current <= 4) {
        return (array = [1, 2, "...", this.total - 1, this.total]);
      } else if (this.total > 10 && this.current > 4 && this.current < 8) {
        return (array = [
          "...",
          this.current - 1,
          this.current,
          this.current + 1,
          "..."
        ]);
      } else if (this.total > 10 && this.current >= 8) {
        return (array = [
          "...",
          this.current - 1,
          this.current,
          this.current + 1,
          "...",
          this.total - 1,
          this.total
        ]);
      }
    }
  },
  methods: {
    unmounted: function(unmounted) {
      this.update = false;
    },
    goFir: function() {
      this.goPage(1);
    },
    goPage: function(val) {
      console.log(val);
      if (val == "...") {
        alert("忒多!~~~~~");
      } else {
        this.current = val;
        typeof this.callBack == "function"
          ? this.callBack(val)
          : console.warn("请提供分页回调函数");
      }
    },
    goPrev: function() {
      this.goPage(this.current - 1);
    },
    goNext: function() {
      this.goPage(this.current + 1);
    },
    goLast: function() {
      this.goPage(this.total);
    },
    callBack: function(val) {
      console.log(val);
    }
  }
};
</script>
<style>
.pages_item {
  /* display: inline-block;
        width: .3rem;
        height:.3rem; */
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-left: 0.1rem;
  font-size: 0.14rem;
  padding: 0.05rem;
  cursor: pointer;
  box-sizing: border-box;
}
.pages_item:hover,
.pages_item.current_page {
  background: rgb(35, 132, 232);
}
.pages_input {
  width: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.05rem;
}
</style>
